<template>
  <div>
    <div id="layout">
      <table id="t" border>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td><td></td></tr>
      </table>
    </div>
    <p id="feedback">
    你选择的是：<span id="select-result">{{ select_result }}</span>。
    </p>
    <button id="btnMerge" @click="onMerge">合并选中单元格</button>
    <button id="btnSplit" @click="onSplit">拆分选中单元格</button>
    <button @click="onSubmit">提交</button>
    <layout-table>
      <template v-for="(item, index) in list" #[item]>
        <div
          :ref="`${item}`"
          :key="index"
        >{{ item }}{{ index }}
        </div>
        
      </template>
    </layout-table>
    <div ref="d">454545</div>
  </div>
</template>
<script>
import $ from 'jquery/dist/jquery'
import 'jquery-ui-dist/jquery-ui'
import 'jquery-ui-dist/jquery-ui.min.css'

export default {
  name: 'table-colspan-rowspan',
  components: {
    'layout-table': {
      template: `<div><slot name=a>weqwq</slot><slot name=b>weqwq</slot></div>`
    }
  },
  data() {
    return {
      select_result: '',
      tables: ``,
      list: ['a']
    }
  },
  mounted() {
    $("#t").selectable({stop: this.showSelected});
    console.log(this.$refs.a, 'a')
    console.log(this.$refs.b, 'b')
    console.log(this.$refs.d, 'd')
  },
  methods: {
    onMerge() {
      var $t = $("#t");
				
				if ($("table", $t).length > 0) {
					alert("不支持嵌套表格！");
					return;
				}
				
				var sigDel = "sign4delete";  // 删除标记，用作类名
				var sigSel = "ui-selected";  // 选中标记，用作类名
				
				// 补充单元格以便后继正确计算坐标
				$("th,td", $t).each(function(){
					// 坐标要实时计算，因会实时补充
					var ridx = $("tr", $t).index($(this).parent("tr"));
					var cidx = $(this).parent().children("th,td").index(this);
					var rowspan = Number($(this).attr("rowspan")) || 1;
					var colspan = Number($(this).attr("colspan")) || 1;
					var isSel = $(this).hasClass(sigSel);
					// 非选单元格拆出的单元格要加删除标记
					
					if (rowspan <= 1 && colspan <= 1)
						return;
					// 跨格开插
					$("tr", $t).each(function(){
						var idx = $("tr", $t).index(this);
						var arr, $td = $("<td>").addClass(isSel ? sigSel : sigDel);
						
						if (idx == ridx) {
							// 本行在 [cidx] 后插入 colspan-1 个
							
							arr = $();  // 准备待插单元格
							for (let i=0; i < colspan-1; i++)
								arr = arr.add($td.clone());
							// 插入
							$("th,td", this).eq(cidx).after(arr);
							
						} else if (ridx < idx && idx < ridx + rowspan) {
							// 以下行在 [cidx] 前插入 colspan 个
							
							arr = $();  // 准备待插单元格
							for (let i=0; i < colspan; i++)
								arr = arr.add($td.clone());
							// 插入
							if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
								$("th,td", this).eq(cidx - 1).after(arr);
							else if ($("th,td", this).eq(cidx).length > 0)
								$("th,td", this).eq(cidx).before(arr);
							else
								$(this).prepend(arr);
						}
					});
				});
				
				var rmin = 10000, cmin = 10000;
				var rmax = 0    , cmax = 0    ;
				var rnum        , cnum        ;
				// 计算起始和跨距
				$("th,td", $t).filter("." + sigSel).each(function(){
					var ridx = $("tr", $t).index($(this).parent("tr"));
					rmin = ridx < rmin ? ridx : rmin;
					rmax = ridx > rmax ? ridx : rmax;
					var cidx = $(this).parent().children("th,td").index(this);
					cmin = cidx < cmin ? cidx : cmin;
					cmax = cidx > cmax ? cidx : cmax;
				});
				rnum = rmax - rmin + 1;
				cnum = cmax - cmin + 1;
				
				// 合并单元格
				$("th,td", $t).each(function(){
					var ridx = $("tr", $t).index($(this).parent("tr"));
					var cidx = $(this).parent().children("th,td").index(this);
					// 标记单元格待删
					if (rmin <= ridx && ridx <= rmax && cmin <= cidx && cidx <= cmax)
						$(this).addClass(sigDel);
					// 处理被选左上角单元格
					if (ridx == rmin && cidx == cmin)
						$(this).removeClass(sigDel).attr({rowspan: rnum, colspan: cnum});
					// 清理残余
					if ($(this).attr("rowspan") == 1) $(this).removeAttr("rowspan");
					if ($(this).attr("colspan") == 1) $(this).removeAttr("colspan");
				}).remove("." + sigDel);
				// 移除标记单元格
				
				this.showSelected();  // 更新选择结果文字
        
    },
    onSplit() {
      var $t = $("#t");
      
      if ($("table", $t).length > 0) {
        alert("不支持嵌套表格！");
        return;
      }
      
      var sigDel = "sign4delete";
      var sigSel = "ui-selected";
      
      $("th,td", $t).each(function(){
        var ridx = $("tr", $t).index($(this).parent("tr"));
        var cidx = $(this).parent().children("th,td").index(this);
        var rowspan = Number($(this).attr("rowspan")) || 1;
        var colspan = Number($(this).attr("colspan")) || 1;
        var isSel = $(this).hasClass(sigSel);

        if (rowspan <= 1 && colspan <= 1)
          return;
        
        if (isSel)
          $(this).removeAttr("colspan").removeAttr("rowspan");
        
        $("tr", $t).each(function(){
          var idx = $("tr", $t).index(this);
          var arr, $td = $("<td>");
          
          if (!isSel)
            $td.addClass(sigDel);
          
          if (idx == ridx) {
            
            arr = $();
            for (var i=0; i < colspan-1; i++)
              arr = arr.add($td.clone());
            
            $("th,td", this).eq(cidx).after(arr);
            
          } else if (ridx < idx && idx < ridx + rowspan) {
            arr = $()
            for (let i = 0; i < colspan; i++)
              arr = arr.add($td.clone())
            
            if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
              $("th,td", this).eq(cidx - 1).after(arr)
            else if ($("th,td", this).eq(cidx).length > 0)
              $("th,td", this).eq(cidx).before(arr)
            else
              $(this).prepend(arr);
          }
        });
      });
      
      $("th,td", $t).remove("." + sigDel)
      
      this.showSelected()
    },
    // 显示已选单元格编号
    showSelected(){
      var result = $("#select-result").empty();
      var isEmpty = true;
      var tds = $("th,td", $("#t"));
      tds.filter(".ui-selected").each(function(){
        result.append("#" + (tds.index(this) + 1) + " ");
        isEmpty = false;
      });
      if (isEmpty) result.append("无");
    },
    onSubmit() {
      let list = ['a','b','c','d','e','f','g','h','i','j','k','l','n','m','o','p']
      let i = 0
      let j = 0
      let els = $('#layout').html()
      els = els.replace(/<\/td>/ig, '<slot name= /></td>')
      els = els.replace(/(ui-selected)/ig, '')
      els = els.replace(/(<td class=")/ig, () =>`<td class="layout-${(list[j++])} `)
      els = els.replace(/(name=)/ig, () => `name="${list[i++]}"`)
      console.log(els)
    }
  }
}
</script>
<style>
#t {
  display: table;
  box-sizing: border-box;
  text-indent: initial;
  unicode-bidi: isolate;
  border-spacing: 0;
  border-color: gray;
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  cursor: pointer;
}
#t tr{
  height: 100px;
}
#t td.ui-selecting { background: #FECA40; }
#t td.ui-selected  { background: #F39814; color: white; }
#t td {
  border: 1px dashed #ccc;
}
#feedback { font-size: 1.4em; }
</style>
<style>
/* #layout-table {
  display: table;
  box-sizing: border-box;
  text-indent: initial;
  unicode-bidi: isolate;
  border-spacing: 0;
  border-color: gray;
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  cursor: pointer;
}
#layout-table tr{
  height: 100px;
}
#layout-table td {
  font-size: 0;
  border: 1px dashed #ccc;
} */
</style>
